<template>
  <view>
    <view class="new-list">
      <view v-for="(value,key) in listData" :key="key" class="box pb10" style="margin:auto; width: 90%;border-radius:20rpx;padding: 0 10rpx;" @click="detail(value.id,0)">
        <image class="integral-mall-goods" mode="aspectFill" :src="value.img"></image>
        <view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{value.name}}</view>
      </view>
    </view>
    <view style="width: 100%; height: 30upx; padding: 40upx 0 100upx;">
      <button @click="showMore()" class="ft16">{{$t('common.list.more')}}</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        total: 0,
        listData: []
      }
    },
    created() {
      this.getList();
    },
    props: {
      selectIndex: {
        default: 0,
        type: Number
      }
    },
    methods: {
      detail(vid, mid) {
        var fxpid = 1
        if (uni.getStorageSync("userinfo")) {
          fxpid = uni.getStorageSync("userinfo").id
        }
        uni.navigateTo({
          url: '/pages/client/tuan/detail?vid=' + vid + '&mid=' + mid + '&fxpid=' + fxpid
        })
      },
      getList() {
        let data = {};
        var limit = 12;
        data.limit = limit
        if (this.selectIndex) {
          data.lx = this.selectIndex
        }
        uni.request({
          url: this.configs.apiUrl + '/api/video/lists',
          data: data,
          success: data => {
            //console.log(data.data)
            if (data.data.total > 0) {
              let list = data.data.rows;
              this.listData = list;
            } else {
              this.listData = [];
              this.contentText.contentdown = '沒有資料'
            }
          },
          fail: (data, code) => {
            //console.log('fail' + JSON.stringify(data));
          }
        });
      },
      showMore () {
        uni.navigateTo({
          url: '/pages/client/tuan/search?selectIndex=' + this.selectIndex
        })
      }
    },
    watch: {
      selectIndex (val) {
        this.getList()
      }
    }
  }
</script>

<style>
  .new-list {
    display: grid;
    /* grid-template-columns: 31% 31% 31%; */
    padding: 30upx 0 0;
    grid-template-columns: repeat(3, 33.3%);
    grid-row-gap: 20rpx;
  }
  
  .integral-mall-goods {
    width: 100%;
    height: 280rpx;
    background: #F2F2F2;
    border-radius: 16upx;
  }

  .user-not-vip {
    width: 100%;
    height: 80rpx;
    background: #FDF6EC;
    border-radius: 40rpx;
    border: 2rpx solid #EFC381;
    text-align: center;
    line-height: 76rpx;
    font-size: 24rpx;
    color: #000000;
    font-weight: bold;
  }


  .tuan-product-l {
    width: 320rpx;
    height: 240rpx;
    border-radius: 16rpx;
    background: #F2F2F2;
  }

  .tuan-product-r {
    width: calc(100% - 320rpx);
  }

  .search-result {
    padding-top: 10px;
    padding-bottom: 20px;
    text-align: center;
  }

  .search-result-text {
    text-align: center;
    font-size: 14px;
    color: #666;
  }

  .example-body {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    padding: 0px;
  }

  .uni-mt-10 {
    margin-top: 10px;
  }
</style>